<template>
  <!-- 系统功能-在线用户 -->
  <div class="app-container">
    <div class="mainbox">
      <!-- 顶部操作 -->
      <div class="filter-container">
        <el-form ref="filterFormRef" :model="filterForm" label-width="46px"
                 @submit.native.prevent>
          <el-form-item label="账号" prop="account">
            <el-input v-model.trim="filterForm.account" maxlength="30" clearable
                      placeholder="请输入内容" class="filter-item limit" @keyup.enter.native="handleFilter" />
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button class="filter-item" type="primary" @click="handleFilter"> 搜索</el-button>
        <el-button @click="handleReset"> 重置</el-button>
      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <div class="flex-1" />
          <dt-dialog-column :columns="columns" @queryTable="getList" />
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="onlineUserList"
          highlight-current-row
          style="width: 100%; "
          :header-cell-style="headerCellStyle"
          border
          @sort-change="sortChange"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            :index="table_index"
          />
          <el-table-column
            v-if="columns[0].show"
            key="account"
            align="center"
            prop="account"
            label="账号"
            min-width="180"
          />
          <el-table-column
            v-if="columns[1].show"
            key="realName"
            align="center"
            prop="realName"
            label="姓名"
            width="180"
          />
          <el-table-column
            v-if="columns[2].show"
            key="sex"
            align="center"
            prop="sex"
            label="性别"
            width="100"
          />
          <el-table-column
            v-if="columns[3].show"
            key="roleName"
            align="center"
            prop="roleName"
            label="角色名称"
            width="180"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[4].show"
            key="loginTime"
            align="center"
            prop="loginTime"
            label="登录时间"
            min-width="180"
          />
          <el-table-column
            :key="Math.random()"
            fixed="right"
            label="操作"
            align="center"
            width="108px"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-button
                v-permission="['SYS_ONLINE_ DOWN_BUTTON']"
                size="mini"
                style="padding: 7px"
                @click="removeSession(row)"
              >
                强制下线
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

</template>
<script>
import sysUserApi from '@/framework/api/sysUser'
import dialogColumn from '@/framework/utils/mixins/dialogColumn'

export default {
  name: 'SysOnline',
  mixins: [dialogColumn],
  data() {
    return {
      filterForm: {
        account: ''
      },
      onlineUserList: [],
      total: 0,
      listLoading: true,
      headerCellStyle: {
        backgroundColor: '#f2f2f2'
      },
      // 列信息
      columns: [
        { prop: 'account', label: '账号', show: true },
        // { prop: 'nickName', label: `昵称`, show: true },
        { prop: 'realName', label: '姓名', show: true },
        { prop: 'sex', label: '性别', show: true },
        { prop: 'roleName', label: '角色名称', show: true },
        { prop: 'loginTime', label: '登录时间', show: true }
      ]

    }
  },
  created() {
    this.handleFilter()
  },
  methods: {
    handleReset() {
      this.$refs.filterFormRef.resetFields()
      this.handleFilter()
    },
    sortChange(data) {
    },
    handleFilter() {
      this.getList()
    },
    getList() {
      this.listLoading = true
      sysUserApi.onlineUserList(this.filterForm).then((res) => {
        this.onlineUserList = res.data
        this.total = res.data.length
        this.listLoading = false
      })
    },
    // 强制下线
    removeSession(row) {
      sysUserApi.removeSession(row.token).then((res) => {
        this.$dtMessage({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      })
      this.getList()
    },
    table_index(index) {
      return index + 1
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
